<template>
    <div>
        <h3>门店列表</h3>
        <div>
            门店名称：<input type="text" v-model="info.shopName">
            开业时间：<input type="date" v-model="info.openTime1">-<input type="date" v-model="info.openTime2">
            <input type="button" value="查询" class="btn btn-primary">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>序号</td>
                    <td>门店名称</td>
                    <td>分店名称</td>
                    <td>门店图片</td>
                    <td>状态</td>
                    <td>开业时间</td>
                    <td>门店地址</td>
                    <td>门店类型</td>
                    <td>特色</td>
                    <td>电话</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list":key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.shopName }}</td>
                    <td>{{ item.branchName }}</td>
                    <td><img :src="item.photo" width="50" height="50"></td>
                    <td>{{ item.state==true ?'开启':'禁用' }}</td>
                    <td>{{moment(item.openTime).format('YYYY-MM-DD')}}</td>
                    <td>{{ item.addressName}}</td>
                    <td>{{ item.shopType}}</td>
                    <td>{{ item.teSe}}</td>
                    <td>{{ item.tel}}</td>
                    <td>
                        <input type="button" value="修改" class="btn btn-primary">
                        <input type="button" value="删除" class="btn btn-danger">
                    </td>
                </tr>
            </tbody>
        </table>
        <!--分页-->
        <div>
            <span>共{{ data.totalCount }}条</span>
            <span>每页{{ info.pageSize }}条</span>
            <span>当前{{info.pageIndex}}/{{ data.totalPage }}条</span>
        
        <!--页码-->
        <input type="button" value="首页" @click="goPage(1)">
        <input type="button" value="上一页" @click="goPage(info.pageIndex-1)">
        <!--循环总页数3-->
        <input type="button" :value="item" v-for="item in data.totalPage" @click="goPage(item)">
        <input type="button" value="下一页"  @click="goPage(info.pageIndex+1)">
        <input type="button" value="尾页">
        
        <input type="button" value="跳转">

       </div>
    </div>
</template> 
 
<script setup lang="ts">
import{ref,reactive,onMounted}from 'vue'
import axios from 'axios'
import moment from 'moment'
import{useRoute,useRouter}from'vue-router'
const router=useRouter()
const route=useRoute()

//向后端传递的参数
let info:any=reactive({
    pageIndex:1, //页码
    pageSize:2,  //页容量
    shopName:'', //门店名称
    openTime1:'', // 开业时间 开始
    openTime2:''
})
//接收后端返回的数据
let data:any=reactive({
    list:[],
    totalCount:0,
    totalPage:0
});


//相当于文档就绪
onMounted(()=>{
    getShopList();
})
const goPage=(num:any)=>{
     console.log('num',num);
     if(num<1){
        info.pageIndex=1;
        return;
     }
     if(num>data.totalPage){
        info.pageIndex=data.totalPage;
        return;
     }
     info.pageIndex=num;
     getShopList();
}
//门店列表
const getShopList=()=>{
      axios({
        url:'/api/Shop/GetShopList',   //404
        method:'get',                   //405
        params:info                      //415
      })
       .then((res) => {
        console.log(res);
        data.list=res.data.list
      })
      .catch((err) => {
        console.log(err);       
      })
}



</script>

<style scoped>

</style>